import { h, ref, watch, onMounted, defineComponent, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import {
  COLUMN_WIDTH_CONFIG,
  calculateTableWidth,
  DefaultTableWidth
} from '@/common/column-width-config'
import { InternalRowData, TableColumns } from '@/common/types'
import ShowOrEdit from '@/views/data-manage/common/show-or-edit'
import ShowOrSelect from '@/views/data-manage/common/show-or-select'
import { NButton, NCheckbox, NIcon, NSpace } from 'naive-ui'
import * as vicon from '@vicons/ionicons5'

function renderIcon(iconName: string) {
  const icon = vicon[iconName]
  return () => h(NIcon, { size: 20 }, { default: () => h(icon) })
}

export function useColumns(state: any, onCallback: Function) {
  const t = window.$t

  const fieldColumnsRef = ref({
    fieldColumns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })
  const indexColumnsRef = ref({
    indexColumns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })

  const createColumns = () => {
    const fieldColumns = [
      {
        title: '#',
        key: 'index',
        align: 'center',
        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('dataManage.columnName'),
        key: 'columnName',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h(ShowOrEdit, {
            value: rowData.columnName,
            onUpdateValue(v) {
              rowData.columnName = v
            }
          })
      },
      {
        title: t('dataManage.dataType'),
        key: 'dataType',
        width: 150,
        render: (rowData: any, unused: number) =>
          h(ShowOrSelect, {
            value: rowData.dataType,
            onUpdateValue(v) {
              rowData.dataType = v
            },
            options: state.dataTypeOptions
          })
      },
      {
        title: t('dataManage.args'),
        key: 'args',
        width: 80,
        render: (rowData: any, unused: number) =>
          h(ShowOrEdit, {
            value: rowData.args,
            onUpdateValue(v) {
              rowData.args = v
            }
          })
      },
      {
        title: t('dataManage.comment'),
        key: 'columnComment',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h(ShowOrEdit, {
            value: rowData.columnComment,
            onUpdateValue(v) {
              rowData.columnComment = v
            }
          })
      },
      {
        title: t('dataManage.isNotNull'),
        key: 'isNotNull',
        align: 'center',
        width: 80,
        render: (rowData: any, unused: number) =>
          h(NCheckbox, {
            value: rowData.isNotNull,
            onChange: (value) => {
              rowData.isNotNull = value
            }
          })
      },
      {
        title: t('dataManage.defVal'),
        key: 'defVal',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h(ShowOrEdit, {
            value: rowData.defVal,
            onUpdateValue(v) {
              rowData.defVal = v
            }
          })
      },
      {
        title: t('dataManage.isPrimkey'),
        key: 'isPrimkey',
        align: 'center',
        width: 80,
        render: (rowData: any, unused: number) =>
          h(NCheckbox, {
            value: rowData.isPrimkey,
            onChange: (value) => {
              rowData.isPrimkey = value
            }
          })
      },
      {
        title: t('dataManage.isPartition'),
        key: 'isPartition',
        align: 'center',
        width: 80,
        render: (rowData: any, unused: number) =>
          h(NCheckbox, {
            value: rowData.isPartition,
            onChange: (value) => {
              rowData.isPartition = value
            }
          })
      },
      {
        title: t('dataManage.previewData'),
        key: 'previewData',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h(ShowOrEdit, {
            value: rowData.previewData,
            onUpdateValue(v) {
              rowData.previewData = v
            }
          })
      },
      {
        title: t('common.operation'),
        key: 'operation',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['operation'](4),
        render: (rowData: any, unused: number) => {
          return h(
            NSpace,
            { style: 'height:23px', justify: 'center' },
            {
              default: () => [
                h(
                  NButton,
                  {
                    size: 'tiny',
                    strong: true,
                    secondary: true,
                    circle: true,
                    type: 'success',
                    title: window.$t('dataManage.insertField'),
                    onClick: () => void onCallback(unused, 'insertField')
                  },
                  renderIcon('Add')
                ),
                h(
                  NButton,
                  {
                    size: 'tiny',
                    strong: true,
                    secondary: true,
                    circle: true,
                    type: 'error',
                    title: window.$t('dataManage.removeField'),
                    onClick: () => void onCallback(unused, 'removeField')
                  },
                  renderIcon('Remove')
                ),
                h(
                  NButton,
                  {
                    size: 'tiny',
                    strong: true,
                    secondary: true,
                    circle: true,
                    type: 'info',
                    title: window.$t('dataManage.moveUp'),
                    onClick: () => void onCallback(unused, 'moveUpField')
                  },
                  renderIcon('ArrowUpOutline')
                ),
                h(
                  NButton,
                  {
                    size: 'tiny',
                    strong: true,
                    secondary: true,
                    circle: true,
                    type: 'info',
                    title: window.$t('dataManage.moveDown'),
                    onClick: () => void onCallback(unused, 'moveDownField')
                  },
                  renderIcon('ArrowDownOutline')
                )
              ]
            }
          )
        }
      }
    ] as TableColumns

    fieldColumnsRef.value = {
      fieldColumns,
      tableWidth: calculateTableWidth(fieldColumns)
    }

    const indexColumns = [
      {
        title: '#',
        key: 'index',
        align: 'center',
        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('dataManage.indexName'),
        key: 'indexName',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h(ShowOrEdit, {
            value: rowData.indexName,
            onUpdateValue(v) {
              rowData.indexName = v
            }
          })
      },
      {
        title: t('dataManage.columns'),
        key: 'columns',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h(ShowOrEdit, {
            value: rowData.columns,
            onUpdateValue(v) {
              rowData.columns = v
            }
          })
      },
      {
        title: t('dataManage.isUnique'),
        key: 'isUnique',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h(NCheckbox, {
            value: rowData.isUnique,
            onChange: (value) => {
              rowData.isNotNull = value
            }
          })
      },
      {
        title: t('common.operation'),
        key: 'operation',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['operation'](2),
        render: (rowData: any, unused: number) => {
          return h(
            NSpace,
            { style: 'height:23px', justify: 'center' },
            {
              default: () => [
                h(
                  NButton,
                  {
                    size: 'tiny',
                    strong: true,
                    secondary: true,
                    circle: true,
                    type: 'success',
                    title: window.$t('dataManage.insertIndex'),
                    onClick: () => void onCallback(unused, 'insertIndex')
                  },
                  renderIcon('Add')
                ),
                h(
                  NButton,
                  {
                    size: 'tiny',
                    strong: true,
                    secondary: true,
                    circle: true,
                    type: 'error',
                    title: window.$t('dataManage.removeIndex'),
                    onClick: () => void onCallback(unused, 'removeIndex')
                  },
                  renderIcon('Remove')
                )
              ]
            }
          )
        }
      }
    ] as TableColumns

    indexColumnsRef.value = {
      indexColumns,
      tableWidth: calculateTableWidth(indexColumns)
    }
  }

  onMounted(() => {
    createColumns()
  })

  watch(useI18n().locale, () => {
    createColumns()
  })

  return {
    fieldColumnsRef,
    indexColumnsRef,
    createColumns
  }
}
